<!DOCTYPE html>
<html lang="en">
<head>
<script src="brython.js"></script>
<meta charset=utf-8 />
<title>Canvas Gradient</title>
<style>
body {
  background: #000;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>
</head>
<body onload="brython()">
<canvas height="600" width="600"></canvas>
<script type="text/python">
canvas = doc[CANVAS][0]
ctx = None
grad = None
body = doc[BODY][0]
color = 255

def change_color(event):
    width = win.innerWidth
    height = win.innerHeight 
    log(width)
    x,y = event.clientX,event.clientY
    rx = 600 * x / width
    ry = 600 * y / height
        
    xc = int(256 * x / width)
    yc = int(256 * y / height)

    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600)
    grad.addColorStop(0, '#000')
    grad.addColorStop(1, 'rgb(%s,%s,%s)' %(xc,(255-xc),yc))
    ctx.fillStyle = grad
    ctx.fillRect(0,0,600,600)
    
if canvas.getContext('2d'):
    ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, 600, 600)
    ctx.save()
    # Create radial gradient
    grad = ctx.createRadialGradient(0,0,0,0,0,600)
    grad.addColorStop(0, '#000')
    grad.addColorStop(1, 'rgb(%s, %s ,%s)' %(color,color,color))

    # assign gradients to fill
    ctx.fillStyle = grad

    # draw 600x600 fill
    ctx.fillRect(0,0,600,600)
    ctx.save()
  
    body.onmousemove = change_color

</script>


</body>
</html>